<!--  -->
<template>
  <div>
    <van-collapse v-model="activeName" accordion>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          offset="150"
          @load="onLoad"
        >
          <van-collapse-item
            v-for="remind in reminds"
            :key="remind.id"
            :title="remind.remindName"
            :name="remind.remindName"
          >
            <van-cell-group>
              <van-cell
                title="时间"
                :label="remind.datetime"
                icon="calender-o"
              />
              <van-cell
                title="备注"
                :label="remind.remindDescribe"
                icon="more-o"
              />
              <van-cell
                title="关联企业"
                :label="remind.enterpriseName"
                icon="wap-home-o"
              />
              <van-cell
                title="创建日期"
                :label="remind.enteringDatatime"
                icon="flag-o"
              />
              <van-cell
                title="创建人"
                :label="remind.enteringPersonnel"
                icon="contact"
              />
            </van-cell-group>
            <van-steps direction="vertical" :active="100000">
              <van-step v-for="attach in remind.attachList" :key="attach.id">
                <template v-if="attach.file">
                  <a :href="attach.url" :download="attach.attachName">
                    <van-cell :title="attach.attachName" icon="down" />
                  </a>
                </template>
                <template v-else>
                  <div @click="openimg(attach.url)">
                    <ui-img :src="attach.url" style="width:100%;height:160px">{{
                      attach.attachName
                    }}</ui-img>
                  </div>
                </template>
              </van-step>
            </van-steps>
          </van-collapse-item>
        </van-list>
      </van-pull-refresh>
    </van-collapse>
  </div>
</template>

<script>
import { getRemind } from "@api";
import { ImagePreview } from "vant";
import _ from "lodash";
export default {
  name: "remind",
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      nextpage: 0,
      activeName: "",
      reminds: [],
      projectId: ""
    };
  },

  mounted() {
    this.projectId = this.$route.params.id;
  },

  methods: {
    openimg(url) {
      ImagePreview({
        images: [url],
        closeable: true
      });
    },
    onLoad() {
      this.loading = true;
      getRemind(this.projectId, this.nextpage).then(res => {
        if (_.isArray(res.data) && !_.isEmpty(res.data)) {
          this.nextpage++;
          this.reminds = this.reminds.concat(res.data);
        } else {
          this.finished = true;
        }
        this.refreshing = false;
        this.loading = false;
      });
    },
    onRefresh() {
      // 清空列表数据
      this.nextpage = 0;
      this.reminds = [];
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.refreshing = true;
      this.onLoad();
    }
  }
};
</script>
<style lang="scss" scoped>
.van-icon {
  top: 5px;
}
</style>
